<template>
    <div class="page-wrapper" style="height:700px; background: #262a36;">
        <div class="page-content" style="padding-top:80px; ">
            <div class="title" style="color:#fff; margin-bottom:60px; ">200+企业信赖之选</div>
            <el-carousel class="my-carousel" type="card" :interval="4000" indicator-position="none" height="374px">
                <el-carousel-item
                    v-for="item in list"
                    :key="item.key"
                ><img :src="item.img" /></el-carousel-item>
            </el-carousel>
        </div>
    </div>
</template>

<script setup>
    import { watch } from 'vue';
    import Bg1 from '../../../public/case-bg-1.png';
    import Bg2 from '../../../public/case-bg-2.png';
    import Bg3 from '../../../public/case-bg-3.png';
    import Bg4 from '../../../public/case-bg-4.png';
    import Bg5 from '../../../public/case-bg-5.png';
    const list = [{ key:'0', img:Bg1 }, { key:'1', img:Bg2 }, { key:'2', img:Bg3 }, { key:'3', img:Bg4 }, { key:'4', img:Bg5 }];
</script>

<style>
    .my-carousel {

    }
    .my-carousel .el-carousel__item--card.is-in-stage {
        opacity:0.2 !important;
    }
    .my-carousel .el-carousel__item--card {
        opacity:0.2 !important;
    }
    .my-carousel .el-carousel__item--card.is-in-stage.is-active {
        opacity:1 !important;
    }
</style>